<template>
  <div v-loading="loading">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-button type="primary" @click="shopUpload">商品上传</el-button>
      </el-form-item>
      <el-form-item label="关键字">
        <el-input v-model="searchVal" placeholder="请输入关键字查询" @keyup="enter" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="dataList"
      border
      style="width: 100%"
      max-height="500"
      show-overflow-tooltip
    >
      <el-table-column v-for="item in tableTem" :label="item.label" :prop="item.prop" />
      <el-table-column prop="shop_img" label="商品图片" width="100">
        <template #default="scope">
          <img :src="scope.row.shop_img" alt="" style="width: 100%; height: 100%" />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="primary" @click="edit(row)">编辑</el-button>
          <el-button type="danger" @click="deleteShop(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination :count="count" @page-change="pageChange"></Pagination>
  </div>
  <Upload
    ref="dialog"
    :shopData="shopData"
    :title="title"
    @getData="getData"
    :page="page.page"
  ></Upload>
</template>

<script lang="ts" setup>
import { reactive, toRefs, watch, ref } from "vue";
import Upload from "@/components/Upload.vue";
import Pagination from "@/components/Pagination.vue";
import { getGoodsList, shopDelete, searcchGoods } from "@/request/api";
import { ElMessage } from "element-plus";
import { shopList } from "@/util/data";
const loading = ref(false);
const count = ref(0);
const page = reactive({
  pageSize: 10,
  page: 1,
});
const tableTem = ref(shopList);
const title = ref("");
const dataList = ref([]);
// 获取商品数据
const getShopList = async () => {
  loading.value = true;
  const { data } = await getGoodsList(page);
  loading.value = false;
  dataList.value = data.data;
  count.value = data.count;
};
getShopList();

const dialog: any = ref(null);
// 商品上传
const shopUpload = () => {
  dialog.value.showDialog = true;
  title.value = "商品上传";
};
// 编辑
const shopData = ref({});
const edit = (row: any) => {
  shopData.value = row;
  dialog.value.showDialog = true;
  title.value = "商品编辑";
};
// 删除
const deleteShop = async (row: any) => {
  await shopDelete(row.shop_id).then((res) => {
    ElMessage.success("删除成功");
    getShopList();
  });
};
//删除或编辑之后更新表格数据
const getData = (data: any, pageCount: any) => {
  dataList.value = data;
  count.value = pageCount;
};
// 当前搜索类型
// 搜索key
let type: string = "shop";
const searchVal = ref("");
const search = async () => {
  type = "sear";
  const { data } = await searcchGoods({ ...page, searchVal: searchVal.value });
  dataList.value = data.res;
  count.value = data.count;
};
const funObj = {
  shop: getShopList,
  sear: search,
};
// 页码改变
const pageChange = async (e: number) => {
  console.log(e);
  page.page = e;
  await funObj[type]();
};
// const enter = (e: any) => {
//   if (e.keyCode == 13) {
//     search();
//   }
// };
</script>
<style></style>
